<!--头部  -->
<template>
	<div class="table">
		<div class="fBox" v-for="(item, index) in list" :key="index">
			<div class="fBox-top">{{ item.name }}</div>
			<div class="fBox-bottom">
				<div class="num">
					<ScrollNumber
						:itemStyle="{
							fontSize: '28px'
						}"
						class="scrollNumber"
						:value="item.val || 0"
					></ScrollNumber>
				</div>
				<div class="van">{{ item.van }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import border from '../../border.vue';
import StatisticsMixins from '../../../StatisticsMixins';
import ScrollNumber from '@/components/vue-scroll-number/src/scroll-number';
import { bigScreenApi } from '@/api/index';

let color = ['#2467ED', '#16E4CF', '#EBA62C'];
export default {
	components: { border },
	mixins: [StatisticsMixins],
	components: { ScrollNumber },
	data() {
		return {
			list: [
				{
					name: '授信金额',
					val: 0,
					van: '万元'
				},
				{
					name: '用信金额',
					val: 0,
					van: '万元'
				},
				{
					name: '评估金额',
					val: 0,
					van: '万元'
				},
				{
					name: '抵押金额',
					val: 0,
					van: '万元'
				}
			]
		};
	},
	props: {
		level: {
			type: [String, Number],
			default: 0
		},
		cityId: {
			type: [String, Number],
			default: ''
		}
	},
	watch: {
		level: {
			handler(newV, oldV) {
				this.getInfo();
			},
			immediate: true
		}
	},

	methods: {
		getInfo() {
			this.$postAction(bigScreenApi.findCuapAmount, {
				xzqhbm: this.level > 1 ? this.cityId : '',
				level: this.level
			}).then(res => {
				if (res && res.code == 1) {
					let cowData = res.data;
					this.list = [
						{
							name: '授信金额',
							val: Number(cowData.creditCost).toFixed(2),
							van: '万元'
						},
						{
							name: '用信金额',
							val: Number(cowData.useCost).toFixed(2),
							van: '万元'
						},
						{
							name: '评估金额',
							val: Number(cowData.assessCost).toFixed(2),
							van: '万元'
						},
						{
							name: '抵押金额',
							val: Number(cowData.pledgeCost).toFixed(2),
							van: '万元'
						}
					];
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.table {
	width: calc(100% - 1.6rem);
	height: calc(100% - 0.2rem);
	/* padding: 26px 17px; */
	//   border: 1px solid red;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	.fBox {
		display: flex;
		flex-direction: column;
		width: 25%;
		&-top {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			flex: 1;
			font-size: 0.16rem;
			// font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #eeeeee;
		}
		&-bottom {
			height: 0.44rem;
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			.num {
				font-size: 0.35rem;
				// font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #ffffff;
				display: flex;
			}
			.van {
				font-size: 0.12rem;
				// font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #eeeeee;
				margin: 0 0 0.2em 0;
			}
		}
	}
}
</style>
